"use client"

import { useState } from "react"
import { View, Text, StyleSheet, TouchableOpacity, Platform, Alert, TextInput } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
import { LinearGradient } from "expo-linear-gradient"
import { ArrowLeft, Camera } from "lucide-react-native"
import { useRouter } from "expo-router"
import { theme } from "../constants/theme"
import * as ImagePicker from "expo-image-picker"
import { Select } from "../components/ui/select"

// 模拟的单词选项
const WORD_OPTIONS = [
    { label: "watch", value: "watch" },
    { label: "apple", value: "apple" },
    { label: "book", value: "book" },
    { label: "pencil", value: "pencil" },
]

export default function AddWordScreen() {
    const router = useRouter()
    const [selectedWord, setSelectedWord] = useState<string>("watch")
    const [wordInput, setWordInput] = useState<string>("")

    const handleBack = () => {
        router.back()
    }

    const handleTakePhoto = async () => {
        // 请求相机权限
        const { status } = await ImagePicker.requestCameraPermissionsAsync()

        if (status !== "granted") {
            Alert.alert("权限错误", "需要相机权限才能拍照")
            return
        }

        try {
            const result = await ImagePicker.launchCameraAsync({
                allowsEditing: true,
                quality: 1,
            })

            if (!result.canceled) {
                // 这里可以处理拍摄的照片
                console.log("拍摄的照片:", result.assets[0].uri)
                // TODO: 实现图片识别逻辑
            }
        } catch (error) {
            console.error("拍照错误:", error)
            Alert.alert("错误", "拍照过程中出现错误")
        }
    }

    const handleConfirm = () => {
        // 这里添加确认导入的逻辑
        Alert.alert("成功", "单词已添加", [{ text: "确定", onPress: () => router.back() }])
    }

    return (
        <SafeAreaView style={styles.container} edges={["top"]}>
            <LinearGradient
                colors={theme.colors.neutral.backgroundGradient}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}
                style={styles.gradientBackground}
            >
                {/* 头部 */}
                <View style={styles.header}>
                    <TouchableOpacity onPress={handleBack} style={styles.backButton}>
                        <ArrowLeft size={24} color={theme.colors.neutral.black} />
                    </TouchableOpacity>

                    <Text style={styles.title}>导入单词</Text>

                    <TouchableOpacity onPress={handleTakePhoto} style={styles.cameraButton}>
                        <Camera size={24} color={theme.colors.neutral.black} />
                    </TouchableOpacity>
                </View>

                {/* 内容区域 */}
                <View style={styles.content}>
                    {/* 单词选择下拉框 */}
                    <View style={styles.selectContainer}>
                        <Select
                            value={selectedWord}
                            onValueChange={setSelectedWord}
                            options={WORD_OPTIONS}
                            placeholder="选择单词"
                        />
                    </View>
                    {/* 提示文本 */}
                    <View style={styles.hintContainer}>
                        <Text style={styles.hintTitle}>导入格式要求：每行一个单词</Text>
                        <Text style={styles.hintText}>
                            若导入失败的原因可能是：导入格式不正确、单词已在收藏本、单词不正确、单词未收录
                        </Text>
                    </View>
                    {/* 添加文本域 */}
                    <View style={styles.textAreaContainer}>
                        <View style={styles.textArea}>
                            <TextInput
                                style={styles.textAreaInput}
                                multiline
                                numberOfLines={4}
                                placeholder="请输入单词，每行一个"
                                placeholderTextColor={theme.colors.neutral.gray}
                                value={wordInput}
                                onChangeText={setWordInput}
                            />
                        </View>
                    </View>


                </View>

                {/* 底部按钮 */}
                <View style={styles.footer}>
                    <TouchableOpacity style={styles.confirmButton} onPress={handleConfirm}>
                        <LinearGradient
                            colors={theme.colors.primary.gradient}
                            start={{ x: 0, y: 0 }}
                            end={{ x: 1, y: 0 }}
                            style={styles.confirmButtonGradient}
                        >
                            <Text style={styles.confirmButtonText}>确定导入</Text>
                        </LinearGradient>
                    </TouchableOpacity>
                </View>
            </LinearGradient>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    gradientBackground: {
        flex: 1,
    },
    header: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
    },
    backButton: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(255, 255, 255, 0.5)",
    },
    title: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        flex: 1,
        textAlign: "center",
    },
    cameraButton: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(255, 255, 255, 0.5)",
    },
    content: {
        flex: 1,
        padding: theme.spacing.lg,
    },
    selectContainer: {
        marginBottom: theme.spacing.xl,
    },
    hintContainer: {
        padding: theme.spacing.lg,
        backgroundColor: "rgba(255, 255, 255, 0.5)",
        borderRadius: theme.borderRadius.large,
    },
    hintTitle: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.md,
        textAlign: "center",
    },
    hintText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
        textAlign: "center",
        lineHeight: 20,
    },
    footer: {
        padding: theme.spacing.lg,
        paddingBottom: Platform.OS === "ios" ? 34 : theme.spacing.lg,
    },
    confirmButton: {
        borderRadius: theme.borderRadius.large,
        overflow: "hidden",
        ...Platform.select({
            ios: {
                shadowColor: "#8A70D6",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.3,
                shadowRadius: 8,
            },
            android: {
                elevation: 8,
            },
        }),
    },
    confirmButtonGradient: {
        paddingVertical: theme.spacing.lg,
        alignItems: "center",
        justifyContent: "center",
    },
    confirmButtonText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.white,
        fontWeight: theme.fontWeight.semiBold,
    },
    textAreaContainer: {
        marginTop: theme.spacing.xl,
    },
    textAreaLabel: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.medium,
        color: theme.colors.neutral.black,
        margin: theme.spacing.sm,
    },
    textArea: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        borderWidth: 1,
        borderColor: theme.colors.neutral.lightGray,
        padding: theme.spacing.md,
    },
    textAreaInput: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.black,
        textAlignVertical: "top",
        minHeight: 100,
    },
})

